<div class="container mx-auto my-6 min-h-96" [ngClass]="['text' + defaultInv]">
	<div
		class="flex flex-col items-center px-4 space-y-3 sm:space-y-0 sm:flex-row sm:justify-start"
	>
		<div class="space-y-2 text-center sm:text-left">
			<h1 class="text-5xl font-bold">Components</h1>
			<span class="block" [ngClass]="['text' + plainInv]">
				{{ this.componentTotal }} templates in {{ this.categoryTotal }} categories
			</span>
		</div>
	</div>
	<div class="flex flex-wrap justify-center max-w-3xl p-4 mx-auto">
		<a
			*ngFor="let category of categories"
			[routerLink]="['/templates/' + category.link]"
			[routerLinkActive]="['ring', 'ring-opacity-20', 'ring' + primary]"
			class="relative px-3 py-1 m-1 rounded-md shadow-sm group md:px-4 md:py-2 hover:ring hover:ring-opacity-50"
			[ngClass]="['hover:ring' + primary, 'bg' + default]"
		>
			<span
				class="absolute top-0 right-0 p-1 text-xs opacity-0 group-hover:opacity-100"
				[ngClass]="['text' + plainInv]"
			>
				{{ category.count }}
			</span>
			<span class="text-sm capitalize">{{ category.name }}</span>
		</a>
	</div>
	<div class="flex justify-center">
		<ads [sticky]="true"></ads>
	</div>
	<router-outlet></router-outlet>
</div>
